export const info = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('info', {
        model: {
            defaults: {
                name: 'info',
                droppable: true,
                attributes: {
                    'data-gjs-type':'info'
                },
                components: [{
                        type: 'div',
                        attributes: {
                            class: 'box'
                        },
                        components: [{
                                type: 'div',
                                attributes: {
                                    class: 'item'
                                },
                                components: [{
                                    type: 'image',
                            },{
                                type: 'text',
                                tagName:'p',
                                content: '姓名：'
                            },{
                                type:'text',
                                tagName:'span',
                                content: '性别：'
                            }  
                        ]}       
                    ]}
                ],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                },
                styles: `
                    .box  {
            /* width: 1000px; */
            height: 300px;

        }
        .item{
            padding: 20px;
           
        }
        .item img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }
        .item p {
            font-size: 18px;
            font-weight: bold;
            margin-left: 20px;
            line-height: 30px;
        }
        .item span {
            font-size: 14px;
            color: #999;
            margin-left: 20px;
        }

                `
            },
        }
    });

    // 注册组件
    editor.BlockManager.add('info', {
        label: '介绍卡片',
        category: '其他类',
        content: {
            type: 'info'
        },
        media: `<svg t="1721382378822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6986" width="30" height="30"><path d="M759.466667 298.666667h-533.333334c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h533.333334c12.8 0 21.333333 8.533333 21.333333 21.333333s-10.666667 21.333333-21.333333 21.333334zM759.466667 490.666667h-533.333334c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h533.333334c12.8 0 21.333333 8.533333 21.333333 21.333333s-10.666667 21.333333-21.333333 21.333334zM439.466667 682.666667h-213.333334c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h213.333334c12.8 0 21.333333 8.533333 21.333333 21.333333s-10.666667 21.333333-21.333333 21.333334z"  p-id="6987"></path><path d="M866.133333 981.333333h-725.333333c-59.733333 0-106.666667-46.933333-106.666667-106.666666V149.333333c0-59.733333 46.933333-106.666667 106.666667-106.666666h725.333333c59.733333 0 106.666667 46.933333 106.666667 106.666666v725.333334c0 59.733333-49.066667 106.666667-106.666667 106.666666zM140.8 85.333333c-36.266667 0-64 27.733333-64 64v725.333334c0 36.266667 27.733333 64 64 64h725.333333c36.266667 0 64-27.733333 64-64V149.333333c0-36.266667-27.733333-64-64-64h-725.333333z"  p-id="6988"></path></svg>`
    });
};